<template>
  <div>
    <!--默认日期选择器-->
    <a-range-picker
      v-if="calendarType === 0"
      v-model="_value"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      :disabled-date="disabledDatePicker"
      :placeholder="['开始日期', '结束日期']"
      :allow-clear="false"
      :style="{width: width || '100%'}"
      :ranges="shorCurs"
    />
    <!--月范围选择器-->
    <el-date-picker
      v-else-if="calendarType === 1"
      v-model="_value"
      :clearable="false"
      :picker-options="pickerLimitOptions"
      type="monthrange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
      value-format="yyyy-MM"
      style="width:100%;"
      @change="handleMonthChange"
    />

    <!--周范围选择器 -->
    <template v-else-if="calendarType === 2">
      <a-week-picker
        v-model="value[0]"
        :disabled-date="disabledStartWeek"
        :allow-clear="false"
        placeholder="开始周"
        style="width:48%;"
        class="week-picker"
        value-format="YYYY-MM-DD"
        @openChange="handleStartOpenChange"
        @change="handleStartWeekChange"
      >
        <template slot="dateRender" slot-scope="current">
          <div class="ant-calendar-date" :style="setCurrentStyle(current, 0)">
            {{ current.date() }}
          </div>
        </template>
      </a-week-picker>
      <span class="separator">~</span>
      <a-week-picker
        v-model="value[1]"
        :disabled-date="disabledEndWeek"
        :open="endWeekOpen"
        :allow-clear="false"
        placeholder="结束周"
        style="width:48%;"
        class="week-picker"
        value-format="YYYY-MM-DD"
        @change="handleEndWeekChange"
        @openChange="handleEndWeekOpenChange"
      >
        <template slot="dateRender" slot-scope="current">
          <div class="ant-calendar-date" :style="setCurrentStyle(current, 1)">
            {{ current.date() }}
          </div>
        </template>
      </a-week-picker>
    </template>
  </div>
</template>
<script>
export default {
  name: 'MultipleDatePicker',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: [Array],
    // 日历类型 0：表示普通的选择器 1：表示月选择器 2：表示周选择器
    calendarType: {
      type: Number,
      default: 0
    },
    shorCurs: {
      type: Object,
      default: () => ({})
    },
    //  picker宽度
    width: {
      type: String,
      default: ''
    }
  },
  data() {
    // console.log(this.shorCurs);
    return {
      endWeekOpen: false,
      pickerLimitOptions: {
        disabledDate(time) {
          const now = new Date();
          const picker = time.getFullYear() + '' + time.getMonth();
          const compare = now.getFullYear() + '' + now.getMonth();
          return (time.getTime() > now.getTime()) || picker === compare; // 大于当前时间禁止
        }
      }
    };
  },
  computed: {
    _value: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    // 开始周数打开事件
    handleStartOpenChange(open) {
      if (!open && this.value[0] === null) {
        this.endWeekOpen = true;
      }
    },
    // 结束周数打开事件
    handleEndWeekOpenChange(open) {
      this.endWeekOpen = open;
    },
    // 开始周数改变，做一层业务限制
    handleStartWeekChange(dateBegin) {
      const dateEnd = this.value[1];
      if (
        this.moment(dateBegin).startOf('week') >=
        this.moment(dateEnd).startOf('week')
      ) {
        this.$emit('input', [undefined, dateEnd]);
        return this.msgError('开始时间不能大于等于结束时间,请您重新选择!');
      }
    },
    // 结束周数改变，做一层业务限制
    handleEndWeekChange(dateEnd) {
      const dateBegin = this.value[0];
      if (
        this.moment(dateEnd).startOf('week') <=
        this.moment(dateBegin).startOf('week')
      ) {
        this.$emit('input', [dateBegin, undefined]);
        return this.msgError('结束时间不能小于等于开始时间,请您重新选择!');
      }
    },
    // 月份范围改变，做一层业务限制
    handleMonthChange(value) {
      const startMonth = this.moment(value[0]).valueOf();
      const endMonth = this.moment(value[1]).valueOf();
      if (startMonth === endMonth) {
        this.$emit('input', []);
        return this.msgError('月份不能为同一个月,请您重新选择!');
      }
    },
    // 隐藏开始周数选择
    disabledStartWeek(startValue) {
      const endValue = this.value[1];
      if (!startValue || !endValue) {
        return false;
      }
      return startValue > this.moment().endOf('week');
    },
    // 隐藏结束周数选择
    disabledEndWeek(endValue) {
      const startValue = this.value[0];
      if (!endValue || !startValue) {
        return false;
      }
      const prevWeek = this.moment().week() - 1;
      return endValue > this.moment().week(prevWeek).endOf('week');
    },
    // 大于今天的日期限制选择
    disabledDatePicker(current) {
      // return current && current >= this.moment().endOf('day');
      return current && current >= this.moment().subtract(1, 'days');
    },
    // 设置当前选中的样式
    setCurrentStyle(current, index) {
      const style = {};
      const dateNow = this.value[index];
      const currentTime = this.moment(current).valueOf();
      const startDay = this.moment(dateNow)
        .startOf('week')
        .valueOf();
      const endDay = this.moment(dateNow)
        .endOf('week')
        .valueOf();
      if (currentTime <= endDay && currentTime >= startDay) {
        style.fontWeight = 'bold';
        style.background = '#bae7ff';
        style.borderRadius = '0';
        style.width = '34px';
      }
      return style;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .separator {
  display: inline-block;
  width: 4%;
  text-align: center;
}
::v-deep .ant-calendar-week-number {
  .ant-calendar-disabled-cell.ant-calendar-selected-day
    .ant-calendar-date:before {
    left: -1px;
    width: 34px;
    background: transparent;
  }
  .ant-calendar-disabled-cell .ant-calendar-date {
    color: rgba(0, 0, 0, 0.25) !important;
    background: #f5f5f5 !important;
  }
}
::v-deep .el-date-range-picker__content .el-date-range-picker__header div {
  cursor: auto;
}
</style>
